<template>
    <div class="message">
        <p v-for="(item,index) in navlist" @click="active(index)">
            <i v-if="item.activeitem"><img src="../img/choose_icon.png" alt=""></i>
            <i v-else>&nbsp;&nbsp;&nbsp;</i>&nbsp;&nbsp;{{item.lable}}
        </p>
        <div class="judge">
            <textarea placeholder="请输入文本信息" maxlength="200"></textarea>
        </div>
        <button class="b-t">常用语</button>
        <button class="b-l">发送</button>
    </div>

</template>

<script>
    export default {
        name: "text",
        data() {
            return {
                navlist: [
                    {
                        lable: "紧急",
                        value: "1",
                        activeitem: true
                    },
                    {
                        lable: "终端TTS播读",
                        value: "2",
                        activeitem: false
                    },
                    {
                        lable: "终端显示器显示",
                        value: "3",
                        activeitem: false
                    },
                    {
                        lable: "广告屏显示",
                        value: "4",
                        activeitem: false
                    },
                    {
                        lable: "CAN故障码信息/中心导航信息",
                        value: "5",
                        activeitem: false
                    },
                ],
                activeitem: 1
            }
        },
        methods: {
            active(index) {
                this.navlist[index].activeitem=!this.navlist[index].activeitem
            }
        }
    }
</script>

<style scoped>
    .message {
        float: left;
        width: 510px;
        height: 389px;
        margin-top: 25px;
        margin-left: 15px;
        /*border:1px solid red;*/
        /*box-sizing: border-box;*/
        overflow: hidden;
        background: url("../../../../static/img/bg_small.png") no-repeat center;
    }

    .message p {
        width: 100%;
        height: 27px;
        line-height: 27px;
        text-align: left;
        color: #afcefc;
        margin: 0 0 0 20px;
        font-family: '微软雅黑', 'Avenir', Helvetica, Arial, sans-serif;
        letter-spacing: 1px;
        font-size: .09em;
        /*border:1px solid red;*/
        /*box-sizing: border-box;*/
    }

    .message i {
        display: inline-block;
        width: 15px;
        height: 15px;
        position: relative;
    }

    .message p:first-child {
        margin-top: 25px;
    }

    .judge {
        width: 450px;
        height: 121px;
        margin-top: 15px;
        margin-left: 19px;
        /*border:1px solid red;*/
        /*box-sizing: border-box;*/
        overflow: hidden;
        border: 1px solid #427fca;
        box-sizing: border-box;
        border-radius: 5px;
    }

    .judge textarea {
        width: 100%;
        height: 115px;
        line-height: 20px;
        vertical-align: top;
        color: #afcefc;
        background-color: rgba(8, 54, 81, 0);
        border: 0px
    }

    /*.judge p:first-child{margin-top:5px;}*/
    button {
        width: 122px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-family: '微软雅黑', 'Avenir', Helvetica, Arial, sans-serif;
        color: #6284a9;
        background: url("../img/bt-bg.png") no-repeat center;
        border: 0px;
        margin-top: 21px;
    }

    .b-t {
        margin-left: 115px
    }

    .b-l {
        margin-left: 30px;
        background: url("../img/bt-checked.png") no-repeat center;
        color: #009fff
    }
</style>
